<style lang="scss" scoped>
    @import '../../css/study-plan.scss';
    .head-tab-box span{padding: 4px 40px;cursor: pointer;font-size: 16px;font-weight: bold;display: inline-block;}
    .head-tab-checked{color: #000;border-top: 3px solid $mco;background:#fff;}
    .notice-middle{padding: 26px 40px;background: #fff;margin-bottom: 10px;}
    .last-notice{font-weight: bold;}
    .notice-middle p{margin: 24px 0}
    .recharge-btn{background: $mco;}
    .notice-main{padding: 50px 180px 40px 0;background: #fff;}
    .name-box{height: 200px;border: 1px solid #d8dce5;border-radius: 4px;overflow-y: auto;}
    .name-box span{padding: 16px;}
    .notice-tip{color: #aaa;text-align: center;line-height: 190px;}
    .notice-btn{width: 120px;}

    .input-dialog{padding-left: 40px;}
    .word-dialog-tap{padding: 8px 0 0 40px;}
    .dialog-btn-left{width: 150px;margin: 0 10px 0 -4px;}
    .dialog-btn-right{width: 150px;background: $mco;}
</style>
<template>
    <section class="plan-list">
        <div class="notice-middle" v-show="noticeType==3">
            <div class="last-notice">剩余可发短信：{{messageNum}}条</div>
            <p>提示：为保障短信正常送达，请注意用词，勿发送营销类信息，{{messageMoney.toFixed(2)}}元/条</p>
            <div><el-button class="recharge-btn" type="primary" @click="dialogLittle.centerDialogVisible = true">微信充值</el-button></div>
        </div>
        <div class="notice-middle" v-show="noticeType==4">
            <div class="last-notice">剩余可发邮件：{{emailNum}}条</div>
            <p>提示：为保障邮件正常送达，请注意用词，勿发送营销类邮件，{{emailMoney.toFixed(2)}}元/条</p>
            <div><el-button class="recharge-btn" type="primary" @click="dialogLittle.centerDialogVisible = true">微信充值</el-button></div>
        </div>
        <div class="notice-main">
            <el-form :model="form" :rules="rules" ref="form" label-width="160px">
                <el-form-item v-if="noticeType==4" label="主题" prop="title" class="pt30">
                    <el-input v-model="form.title" class="input" placeholder="请输入主题名称"></el-input>
                </el-form-item>
                <el-form-item :label="noticeType==3?'短信内容':'正文'" prop="content">
                    <el-input v-model="form.content" type="textarea" :autosize="{ minRows:6}"  placeholder="请输入正文内容"></el-input>
                </el-form-item>
                <el-form-item label="学员明细">
                    <div class="name-box">
                        <div class="notice-tip" v-if="nameList.length==0">暂无可通知学员</div>
                        <template v-for="one in nameList">
                            <span>{{one.Username}}</span>
                        </template>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="notice-btn" @click="submitForm('form')">通知</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-dialog
                :title="dialogLittle.title"
                :visible.sync="dialogLittle.centerDialogVisible"
                width="460px"
                center>
            <el-input class="input-dialog" v-model="buyNum" :placeholder="dialogLittle.placeholder"></el-input>
            <p class="word-dialog-tap">支付方式：微信支付</p>
            <p class="word-dialog-tap">收费标准：{{dialogLittle.singlePrice}}元/条</p>

            <span slot="footer" class="dialog-footer">
                <el-button class="dialog-btn-left" @click="dialogLittle.centerDialogVisible = false">取 消</el-button>
                <el-button class="dialog-btn-right" type="primary" @click="account">立即支付</el-button>
            </span>
        </el-dialog>
    </section>

</template>

<script>

import qs from 'qs'

export default{
    data: function(){
        return {
            studyID:this.$route.query.studyID,
            noticeType:3,
            messageNum:0,
            messageMoney:0.05,
            emailNum:0,
            emailMoney:0.01,
            buyNum:'',
            dialogLittle:{
                centerDialogVisible: false,
                title:'短信充值',
                placeholder:'请输入所需短信条数',
                singlePrice:0.05
            },
            path: [
                {
                    'name':'培训学习',
                    'path':'/study/plan-list'
                },
                {
                    'name':'学习计划',
                    'path':'/study/plan-list'
                },
                {
                    'name':'学习计划通知'
                }
            ],

            form:{
                title:'',
                content:''
            },
            nameList:[],
            rules: {
                title: [
                    { required: true, message: '请输入邮件主题', trigger: 'blur' },
                ],
                content: [
                    { required: true, message: '请输入正文内容', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    axios.post('/com/study/notifyStudy', qs.stringify({
                        studyID:this.studyID,
                        sendType:this.noticeType==3?1:2,
                        body:this.form.content,
                        subject:this.form.title
                    })).then((res) => {
                        var d = res.data;
                        if(d.flag == 1){
                            this.$message.success('通知成功')
                            setTimeout(()=>{
                                history.go(-1);
                            },500)
                        }else {
                            this.$message.error(d.msg)
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        noticeActive(){
            this.noticeType = 3;
            this.dialogLittle={
                centerDialogVisible: false,
                title:'短信充值',
                placeholder:'请输入所需短信条数',
                singlePrice:0.05
            }
        },
        emailActive(){
            this.noticeType = 4;
            this.dialogLittle={
                centerDialogVisible: false,
                title:'邮件充值',
                placeholder:'请输入所需邮件条数',
                singlePrice:0.01
            }
        },
        account(){
            axios.post('/com/orders/addOther', qs.stringify({
                orderType:this.noticeType,
                num:this.buyNum
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.$router.push({name:'resourceResourcePay',query:{OID:d.data.OrderID,allCount:Number(this.dialogLittle.singlePrice*this.buyNum).toFixed(2)}})
                }else {
                    this.$message.error(d.msg)
                }
            });
        }
    },
    mounted: function(){
        this.$store.commit('setPath', this.path)
        axios.post('/com/study/getAllUnnoticeStudyMembers', qs.stringify({      //获取通知的学员名单
            studyID:this.studyID
        })).then((res) => {
            var d = res.data;
            if(d.flag == 1){
                this.nameList = d.data;
            }else {
                this.$message.error(d.msg)
            }
        });

        axios.post('/com/account/getSmsBalance', qs.stringify({         //获取短信剩余数
        })).then((res) => {
            var d = res.data;
            if(d.flag == 1){
                this.messageNum = d.data.SmsBalance;
                this.messageMoney = Number(d.data.Price)
            }else {
                this.$message.error(d.msg)
            }
        });

        axios.post('/com/account/getEmailBalance', qs.stringify({           //获取邮件剩余数
        })).then((res) => {
            var d = res.data;
            if(d.flag == 1){
                this.emailNum = d.data.EmailBalance;
                this.emailMoney = Number(d.data.Price)
            }else {
                this.$message.error(d.msg)
            }
        });

        axios.post('/com/study/getStudyBaseData', qs.stringify({           //获取短信默认内容基本信息
            studyID:this.studyID
        })).then((res) => {
            var d = res.data;
            if(d.flag == 1){
                this.form.content = '《'+d.data.Title+'》'+(d.data.FinishDays>0?('学习计划于开始学习后'+d.data.FinishDays+'天内完成'):('学习计划完成时间'+(d.data.StartTime==d.data.FinishTime?d.data.StartTime.split(' ')[0]:(d.data.StartTime.split(' ')[0]+'至'+d.data.FinishTime.split(' ')[0]))))+'，微信中查找小程序【静好学堂】开始学习吧！'
            }else {
                this.$message.error(d.msg)
            }
        });
    }
}


</script>
